<!--
 * @Author: sxb
 * @Email: sxb@mail.com
 * @Date: 2020-05-21 14:32:13
 * @Descripttion: 
--> 
<template>
  <div class="app-container monthly-adjustment">
    <el-row>
      <h3>月度调整</h3>
    </el-row>
    <el-row style="margin-top: 20px;">
      <el-col :span="24">
        <el-form :inline="true" :model="formMonth" ref="ruleFormRef" class="demo-form-inline">
          <el-form-item label="填报月份：" style="margin:0 3px 0 0">
            <el-date-picker
              v-model="formMonth.date"
              align="right"
              type="month"
              placeholder="选择日期"
              value-format='yyyy-MM'
              :clearable="false" 
              :picker-options="formMonth.date"
            ></el-date-picker>
          </el-form-item>
          <el-form-item style="margin:0 3px 0 0">
            <el-button type="primary" size="mini" @click="onSubmitSearch">搜索</el-button>
          </el-form-item>
          <!-- <el-form-item style="margin:0 3px 0 0">
            <el-button type="default" size="mini" @click="onSubmitClear()">清除</el-button>
          </el-form-item> -->
        </el-form>
      </el-col>

      <el-col :span="6">
        
        <!-- <table cellspacing="0" cellpadding="0" border="0" class="el-table" style="width: 98%">
          <tr>
            <th colspan="1" rowspan="1" class="is-center"><div class="cell">企业名称</div></th>
            <th colspan="1" rowspan="1" class="is-center"><div class="cell">本月预估</div></th>
            <th colspan="1" rowspan="1" class="is-center"><div class="cell">本月调整量</div></th>
            <th colspan="1" rowspan="1" class="is-center"><div class="cell">修正量</div></th>
          </tr>
        </table> -->
        <el-table :data="tableMonthData" style="width: 100%;" max-height="550">
          <el-table-column align="center" prop="deptName" label="企业名称" width="100"></el-table-column>
          <el-table-column align="center" prop="forecastNumber" label="本月预估" width="100"></el-table-column>
          <el-table-column align="center" prop="adjustmentNumber" label="本月调整量" width="100"></el-table-column>
          <el-table-column align="center" prop="correctNumber" label="修正量" width>
            <template slot-scope="scope">
              <el-input class="edit-input-1" v-model="scope.row.correctNumber" placeholder @focus="bindCorrectNumber(scope.row.correctNumber)" @blur="editCorrectNumber(scope.row, scope.row.correctNumber)"></el-input>
            </template>
          </el-table-column>
        </el-table>
        <div class="total_line_2">
          <span>
            <b>合计</b>
          </span>
          <span>
            <b>{{sumLastNumber}}</b>
          </span>
          <span>
            <b>{{sumAdjustmentNumber}}</b>
          </span>
          <span>
            <b>{{sumCorrectNumber}}</b>
          </span>
        </div>

        <!-- <div class="warning">
          上月结算：上月结算用电量
          <br />本月调整：本月企业填报的调整量
          <br />修正量：售电公司分析偏差后的修改量
          <br />
        </div> -->
      </el-col>

      <el-col :span="18" style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
        
        <div id="chart_box" style="width: 100%;height: 600px;"></div>
      </el-col>
    </el-row>
  </div>
</template>
<script>
import echarts from "echarts";
import axios from "axios";
require("echarts/theme/macarons");
import { apiGetDeclareMonthView, apiPutDeclareMonth } from "../../../api/longtermsalesplan/declareMonth";

export default {
  data() {
    return {
      nowMonth: this.getNowMonth(),
      oldCorrectNumber: '',
      sumAdjustmentNumber: 0,
      sumCorrectNumber: 0,
      sumLastNumber: 0,
      formMonth: {
        date: ""
      },
      tableMonthData: [],
      seriesData01: [],
      seriesData02: [],
      xAxis: []
    };
  },
  created() {
    this.formMonth.date = this.nowMonth
    this.getDeclareMonthView()
  },
  methods: {
    bindCorrectNumber(correctNumber){
      this.oldCorrectNumber = correctNumber;
    },
    editCorrectNumber(rowData, correctNumber){
      if (this.oldCorrectNumber != correctNumber) {
        rowData.correctNumber = correctNumber;
        apiPutDeclareMonth(rowData).then(res => {
          this.$message({
            type: 'success',
            message: '执行成功!'
          });
        })
        .catch(error => {
          console.log(error)
        })
      }
    },
    getDeclareMonthView(){
      let paramObj = { declareMonth: this.formMonth.date }
      apiGetDeclareMonthView(paramObj)
      .then(res => {
        this.tableMonthData = res.list;
        this.sumAdjustmentNumber = res.sumAdjustmentNumber;
        this.sumCorrectNumber = res.sumCorrectNumber;
        this.sumLastNumber = res.sumLastNumber;
        
        this.getEchartsData()
        this.setOptions(this.xAxis, this.seriesData01, this.seriesData02);
      })
      .catch(error => {
        console.log(error);
      });
    },
    //搜索
    onSubmitSearch() {
      this.getDeclareMonthView();
    },
    //清除搜索表单
    onSubmitClear() {
      this.formMonth.date = "";
    },    
    getNowMonth() {
      var date = new Date();
      var seperator1 = "-";
      var year = date.getFullYear();
      var month = date.getMonth() + 1;
      var strDate = date.getDate();
      if (month >= 1 && month <= 9) {
          month = "0" + month;
      }
      var currentMonth = year + seperator1 + month;
      return currentMonth;
    },
    // 柱形图表数据
    getEchartsData(){
      var _this = this
      let newxAxis = [];
      let newSeriesData01 = [];
      let newSeriesData02 = [];

      this.tableMonthData.forEach(item => {
        newxAxis.push(item.deptName)
        newSeriesData01.push(item.forecastNumber)
        newSeriesData02.push(item.adjustmentNumber)
      });

      this.xAxis = newxAxis;
      this.seriesData01 = newSeriesData01;
      this.seriesData02 = newSeriesData02;
    },
    //柱形图表
    setOptions(xAxis, seriesData01, seriesData02) {
      let myChart = echarts.init(document.getElementById("chart_box"));
      myChart.setOption({
        title: { text: "" },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        color: ["#38a0ff", "#4cca73"],
        legend: {
          orient: "horizontal",
          x: "center",
          y: "bottom"
        },
        grid: {
          left: "3%",
          right: "2%",
          bottom: "5%",
          containLabel: true
        },
        toolbox: {},
        xAxis: [
          {
            type: "category",
            data: xAxis,
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: {
          type: "value",
          axisTick: {
            show: false
          }
        },
        series: [
          {
            name: "本月预估",
            type: "bar",
            // stack: 'vistors',
            barWidth: "20",
            data: seriesData01
          },
          {
            name: "本月调整量",
            type: "bar",
            // stack: 'vistors',
            barWidth: "20",
            data: seriesData02
          }
        ]
      });
    }
  },
  components: {
  },
  mounted: function() {
    this.getEchartsData()
    this.setOptions(this.xAxis, this.seriesData01, this.seriesData02);
    // this.$nextTick(function() {});
  }
};
</script>
<style>
.monthly-adjustment .warning {
  padding: 10px 15px;
  margin-top: 40px;
  background: #ffffcc;
  color: #555555;
}
.total_line_2 {
  width: 100%;
  border-bottom: 1px solid #ebeef5;
  border-right: 1px solid #ebeef5;
  box-shadow: 0 -5px 4px 2px rgba(119, 199, 180, 0.1);
  position: relative;
  z-index: 100;
  border-top-left-radius: 4px;
  border-top-right-radius: 4px;
  background-color: rgb(14, 125, 98);
}
.total_line_2 span {
  display: inline-block;
  padding: 12px 0;
  font-size: 14px;
  color: #ffffff;
  width: 23%;
  text-align: center;
}
.total_line_2 span b {
  display: inline-block;
  width: 100%;
  box-sizing: border-box;
  padding: 0 10px;
}
.edit-input-1,.edit-input-1 input{
  width: 100% !important;
}
/* .monthly-adjustment .el-table__body tbody{height:520px; overflow-x: hidden; overflow-y: scroll;} */
.cell {
    display: inline-block;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    position: relative;
    vertical-align: middle;
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
}
.el-table th {
    padding: 12px 0;
    min-width: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    text-overflow: ellipsis;
    vertical-align: middle;
    position: relative;
    text-align: left;
}
.el-table th.is-center {
    text-align: center;
}
</style>
